import React from 'react';
import StateLessButton from '../components/StateLessButton';
import ES6Button from '../components/ES6Button';
import Year from '../components/Year';
import Month from '../components/Month';
import Day from '../components/Day';
import Now from '../components/Now';

import styles from './index.less';//less中的@import导入的css文件，不会放在styles中
import styles2 from './iconfont.css';
console.log(styles2)
console.log(styles)

class IndexView extends React.Component {
    constructor(props) {
        super(props);
    }

    state = {
        year: '1970',
        month: '10',
        day: '3'
    }

    onDayChange = (day) => {
        const state = { ...this.state, day };
        this.setState(state);
    }

    onYearChange = (year) => {
        const state = { ...this.state, year };
        this.setState(state);
    }

    onMonthChange = (month) => {
        const state = { ...this.state, month };
        this.setState(state);
    }

    render() {
        return (<div>
            <div>
                {StateLessButton('blue', 'StateLessButton')}
                <ES6Button color="red" text="ES6Button" />
            </div>
            <div>现在时间：<Now/></div>
            <div>
                {this.state.year}年{this.state.month || '-'}月{this.state.day || '-'}日
            </div>
            <div>
                <Year begin={'1990'} end={'2020'} year={this.state.year} onChange={this.onYearChange} />年
                <Month year={this.state.year} month={this.state.month} onChange={this.onMonthChange} />月
                <Day year={this.state.year} month={this.state.month} day={this.state.day} onChange={this.onDayChange} />日
            </div>
            <div className={styles.test}>test iconfont</div>
            <div className={styles2.className}>xxxxx</div>
        </div>);
    }
}

export default IndexView;

